<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
            font-size: 15px;
            /* display: none; */
        }
        
        h2 {
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 20px;
            line-height: 1.1;
        }
        
        .yhm input,
        .mim input {
            width: 98%;
            padding: 6px 12px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        
        .yhm,
        .mim {
            font-weight: 700;
            margin: 20px 0;
        }
        
        .yhm label,
        .mim label {
            display: inline-block;
            margin-bottom: 5px;
        }
        
        hr {
            border: 0;
            border-bottom: 1px solid #ccc;
        }
        
        .mfdl {
            margin: 20px 0;
        }
        
        .mfdl {
            position: relative;
        }
        
        .mfdl label {
            margin-left: 20px;
        }
        
        .mfdl label input {
            position: absolute;
            margin-left: -20px;
            bottom: 3px;
        }
        
        button {
            padding: 6px 12px;
            background: #337ab7;
            border: 1px solid #2e6da4;
            color: #fff;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        .box0 {
            width: 500px;
            margin: auto;
            background-color: #fff;
            overflow: hidden;
            border-radius: 5px;
            padding: 20px;
            font-size: 14px;
        }
        
        .quxiao {
            background: #fff;
            color: #000;
            border: 1px solid #ccc;
        }
        
        .zzc {
            width: 100%;
            height: 100%;
            background-color: #ccc;
        }
        
        input,
        button {
            margin-top: 10px;
            cursor: pointer;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #btn {
            margin-left: 50px;
        }
        
        button:hover {
            transform: scale(1.1);
        }
    </style>


</head>

<body>
    <div class="box">
        <h2>用户注册</h2>
        <hr>
        <div class="yhm">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="mim">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <!-- <div class="mim">
            <label for="passwoedto">确认密码</label>
            <input type="password" id="passwoedto" placeholder="请再次输入密码">
            <span class="txt"></span>
        </div> -->
        <div class="yhm">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入真实姓名">
        </div>
        <div class="form-group">
            <label class="radio-inline nan">
                        <input type="radio"  name="sex" id="nan" checked >学生
                    </label>
            <label class="radio-inline">
                        <input type="radio" name="sex"  id="nv">老师
                    </label>
        </div>
        <button id="btn2" style="color:#fff;">注册</button>
        <button id="btn" style="color:#fff;">登陆</button>


    </div>

</body>
<script src="jquery.min.js"></script>
<script src="url.js"></script>
<script>
    let btn2 = $("#btn2");
    // let user = document.querySelectorAll("#user")[0].value;
    // let password = document.querySelectorAll("#password")[0].value;
    // let name = document.querySelectorAll("#name")[0].value;
    // $("input").keyup(function() {
    //     if (username)
    // })
    $("#username").focus()
    btn.click(function() {

        location.href = `${path}/denglu.html`;

    })
    btn2.click(function() {
        let username = $("#username").val();
        let password = $("#password").val();
        let name = $("#name").val();

        console.log($("#nv")[0].checked ? 0 : 1)
        if (username && password && name) {

            $.ajax({
                url: `${path}/zhuce`,
                data: {
                    username,
                    password,
                    name,
                    type: $("#nv")[0].checked ? 0 : 1
                },
                success(data) {
                    if (data === "error") {
                        alert("注册失败")
                    } else {
                        alert("注册成功")
                        location.href = `${path}/denglu.html`;
                    }
                }
            })

        } else(
            alert("出问题了")
        )

    })
    window.onkeydown = function(event) {
        if (event.keyCode === 13) {
            $("#btn2").click()
        }

    }
</script>


<script>
</script>

</html>